<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
    <style>
        body {
            text-align: center
        }

        #divcss5 {
            margin: 0 auto;
            border: 1px solid #000;
            width: 900px;
            height: 500px
        }

        #nav {
            width: 730px;
            height: 50px;
            background-color: #DFD4B5;
            margin: auto;
        }

        /*子类选择器 > */
        #nav > ul {
            font-weight: bold;
            font-size: small;
            line-height: 50px;
            margin: auto;
        }

        #nav > ul > li {
            list-style-type: none;
            float: left;
        }

        #nav span {
            padding-left: 10px;
            padding-right: 10px;
        }

        li:hover {
            color: blue;
            text-decoration: underline;
            cursor: pointer;
        }

        li:active {
            color: red;
        }
    </style>
</head>
<body>
<div id="nav">
    <ul>
        <li><a href="{{ url_for('nav') }}">首页<span>|</span></li>
        <li><a href="{{ url_for('zxt') }}">折线图<span>|</span></li>
        <li><a href="{{ url_for('bing') }}">饼状图<span>|</span></li>
        <li><a href="{{ url_for('three_d') }}">3D图<span>|</span></li>
        <li><a href="{{ url_for('rose') }}">玫瑰图<span>|</span></li>
        <li><a href="{{ url_for('ldt') }}">漏斗图<span>|</span></li>
        <li><a href="{{ url_for('zzt') }}">柱状图<span>|</span></li>
        <li><a href="{{ url_for('wordcloud') }}">词云图<span>|</span></li>
        <li><a href="{{ url_for('sdt') }}">散点图</li>
    </ul>
</div>
<div id="divcss5">
    <div id="3caea3a24e5c438c934ba856dff3bdbd" class="chart-container" style="width:900px; height:500px;"></div>
</div>
<script>
    var chart_3caea3a24e5c438c934ba856dff3bdbd = echarts.init(
        document.getElementById('3caea3a24e5c438c934ba856dff3bdbd'), 'white', {renderer: 'canvas'});
    var option_3caea3a24e5c438c934ba856dff3bdbd = {
        "animation": true,
        "animationThreshold": 2000,
        "animationDuration": 1000,
        "animationEasing": "cubicOut",
        "animationDelay": 0,
        "animationDurationUpdate": 300,
        "animationEasingUpdate": "cubicOut",
        "animationDelayUpdate": 0,
        "color": [
            "#c23531",
            "#2f4554",
            "#61a0a8",
            "#d48265",
            "#749f83",
            "#ca8622",
            "#bda29a",
            "#6e7074",
            "#546570",
            "#c4ccd3",
            "#f05b72",
            "#ef5b9c",
            "#f47920",
            "#905a3d",
            "#fab27b",
            "#2a5caa",
            "#444693",
            "#726930",
            "#b2d235",
            "#6d8346",
            "#ac6767",
            "#1d953f",
            "#6950a1",
            "#918597"
        ],
        "series": [
            {
                "type": "effectScatter",
                "name": "\u6bcf\u5c0f\u65f6\u5f39\u5e55\u6570\u91cf",
                "showEffectOn": "render",
                "rippleEffect": {
                    "show": true,
                    "brushType": "stroke",
                    "scale": 2.5,
                    "period": 4
                },
                "symbol": "arrow",
                "symbolSize": 10,
                "data": [
                    [
                        "00",
                        96
                    ],
                    [
                        "01",
                        59
                    ],
                    [
                        "02",
                        24
                    ],
                    [
                        "03",
                        13
                    ],
                    [
                        "04",
                        5
                    ],
                    [
                        "05",
                        4
                    ],
                    [
                        "06",
                        20
                    ],
                    [
                        "07",
                        44
                    ],
                    [
                        "08",
                        45
                    ],
                    [
                        "09",
                        122
                    ],
                    [
                        "10",
                        151
                    ],
                    [
                        "11",
                        194
                    ],
                    [
                        "12",
                        183
                    ],
                    [
                        "13",
                        185
                    ],
                    [
                        "14",
                        162
                    ],
                    [
                        "15",
                        188
                    ],
                    [
                        "16",
                        205
                    ],
                    [
                        "17",
                        184
                    ],
                    [
                        "18",
                        168
                    ],
                    [
                        "19",
                        158
                    ],
                    [
                        "20",
                        195
                    ],
                    [
                        "21",
                        235
                    ],
                    [
                        "22",
                        186
                    ],
                    [
                        "23",
                        174
                    ]
                ],
                "label": {
                    "show": false,
                    "position": "top",
                    "margin": 8
                },
                "markPoint": {
                    "silent": false,
                    "precision": 2,
                    "label": {
                        "show": true,
                        "position": "top",
                        "margin": 8
                    },
                    "data": [
                        {
                            "name": "\u6700\u5c0f\u503c",
                            "type": "min"
                        },
                        {
                            "name": "\u6700\u5927\u503c",
                            "type": "max"
                        },
                        {
                            "name": "\u5e73\u5747\u503c",
                            "type": "average"
                        }
                    ]
                }
            }
        ],
        "legend": [
            {
                "data": [
                    "\u6bcf\u5c0f\u65f6\u5f39\u5e55\u6570\u91cf"
                ],
                "selected": {
                    "\u6bcf\u5c0f\u65f6\u5f39\u5e55\u6570\u91cf": true
                },
                "show": true,
                "padding": 5,
                "itemGap": 10,
                "itemWidth": 25,
                "itemHeight": 14
            }
        ],
        "tooltip": {
            "show": true,
            "trigger": "item",
            "triggerOn": "mousemove|click",
            "axisPointer": {
                "type": "line"
            },
            "textStyle": {
                "fontSize": 14
            },
            "borderWidth": 0
        },
        "xAxis": [
            {
                "name": "\u5c0f\u65f6",
                "show": true,
                "scale": false,
                "nameLocation": "end",
                "nameGap": 15,
                "gridIndex": 0,
                "inverse": false,
                "offset": 0,
                "splitNumber": 5,
                "minInterval": 0,
                "splitLine": {
                    "show": false,
                    "lineStyle": {
                        "show": true,
                        "width": 1,
                        "opacity": 1,
                        "curveness": 0,
                        "type": "solid"
                    }
                },
                "data": [
                    "00",
                    "01",
                    "02",
                    "03",
                    "04",
                    "05",
                    "06",
                    "07",
                    "08",
                    "09",
                    "10",
                    "11",
                    "12",
                    "13",
                    "14",
                    "15",
                    "16",
                    "17",
                    "18",
                    "19",
                    "20",
                    "21",
                    "22",
                    "23"
                ]
            }
        ],
        "yAxis": [
            {
                "name": "\u5355\u4f4d/\u6761",
                "show": true,
                "scale": false,
                "nameLocation": "end",
                "nameGap": 15,
                "gridIndex": 0,
                "inverse": false,
                "offset": 0,
                "splitNumber": 5,
                "minInterval": 0,
                "splitLine": {
                    "show": false,
                    "lineStyle": {
                        "show": true,
                        "width": 1,
                        "opacity": 1,
                        "curveness": 0,
                        "type": "solid"
                    }
                }
            }
        ],
        "title": [
            {
                "text": "\u756a\u5267\u6bcf\u5c0f\u65f6\u5f39\u5e55\u6570\u91cf",
                "padding": 5,
                "itemGap": 10
            }
        ],
        "visualMap": {
            "show": true,
            "type": "continuous",
            "min": 0,
            "max": 250,
            "inRange": {
                "color": [
                    "#50a3ba",
                    "#eac763",
                    "#d94e5d"
                ]
            },
            "calculable": true,
            "inverse": false,
            "splitNumber": 5,
            "orient": "vertical",
            "showLabel": true,
            "itemWidth": 20,
            "itemHeight": 140,
            "borderWidth": 0
        }
    };
    chart_3caea3a24e5c438c934ba856dff3bdbd.setOption(option_3caea3a24e5c438c934ba856dff3bdbd);
</script>
</body>
</html>
